<template>
	<div>
		<div class="mask-model" @tap="close" v-if="showMask">
			<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;"></image>
			<div class="mask" v-if="getInfo.type == 'integral'">
				<div class="mask-box">
					<div class="jiu-font48-fff" style="font-size: 6.4vw;" v-if="getInfo.count">签到成功</div>
					<div class="jiu-font48-fff" style="font-size: 6.4vw;" v-else-if="getInfo.amount">扭蛋成功</div>
					<div class="jiu-font24-555" style="color: #FFCE80;">+{{ getInfo.count || getInfo.amount }}{{ getInfo.title }}</div>
					<div class="img-box">
						<image src="../../../static/img/gashaponImg/stone.png" mode="aspectFill" class="stone-img"></image>
					</div>
					<div class="line-box">
						<span class="dashed"></span>
					</div>
					<div class="look-btn" @tap="confirm">立即查看</div>
					<div class="cancel-text" @tap="close">返回</div>
				</div>
			</div>
			
			<div class="mask" v-else-if="getInfo.info.type == 'collection' || getInfo.info.type == 'blind_box' || getInfo.info.type == 'debris'">
				<div class="mask-box">
					<image :src="getInfo.info.cover" mode="aspectFill" style="width: 82.93vw;height: 82.93vw;border-radius: 6.4vw;"></image>
					<div class="maskInfo-box">
						<div style="display: flex;">
							<span class="line"></span>
							<div class="info-box">
								<span class="info-title">{{ getInfo.info.title || getInfo.info.spuTitle }}</span>
								<div style="display: flex;flex-wrap: wrap;" v-if="getInfo.info.tagsList">
									<div class="info-border" v-for="item in getInfo.info.tagsList.split(',')">{{item}}</div>
								</div>
								<div style="display: flex;flex-wrap: wrap;" v-if="getInfo.info.tags">
									<div class="info-border" v-for="item in getInfo.info.tags.split(',')">{{item}}</div>
								</div>
							</div>
						</div>
						<div class="get-btn" @tap="confirm">
							立即查看
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showMask: false,
				getInfo: {}
			}
		},
		methods:{
			close(){
				this.showMask = false;
			},
			open(obj){
				this.getInfo = obj.obj;
				this.showMask = true;
				this.success = obj.success;
			},
			async confirm(){
				if (this.success) await this.success();
				this.close()
			}
		}
	}
</script>

<style lang="scss">
	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s infinite linear;
	}
	
	@keyframes box-ani {
		from {
			transform: rotate(0)
		}
	
		to {
			transform: rotate(360deg)
		}
	}
	@keyframes big{
		0%{
			transform: scale(0.3);
		}
		100%{
			transform: scale(1);
		}
	}
	.mask{
		animation: big 1.5s;
		padding: 0 6.4vw;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	.mask-model {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1111;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.mask-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10.67vw 4.27vw;
			padding-bottom: 6.67vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw;
			width: 100%;
			
			.img-box{
				padding: 14.93vw 14.93vw 15.2vw 15.2vw;
				background-color: #272727;
				border-radius: 6.4vw;
				margin-top: 6.4vw;
				.stone-img{
					width: 40vw;
					height: 40vw;
					display: block;
				}
			}
			
			.line-box {
				padding-top: 6.4vw;
				width: 100%;
				// overflow: hidden;
				position: relative;
				display: flex;
			
				.dashed {
					background: linear-gradient(to left,
							transparent 0%,
							transparent 50%,
							#000 50%,
							#000 100%);
					background-size: 16px 1px;
					background-repeat: repeat-x;
					width: 100%;
					height: 1px;
				}
			}
			
			.look-btn{
				width: 100%;
				line-height: 12.8vw;
				text-align: center;
				margin-top: 6.4vw;
				border-radius: 6.4vw;
				background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
				box-shadow: 0rem 3rem 5rem rgba(71,12,114,0.48);
				font-size: 3.73vw;
				font-weight: 500;
				color: #000;
			}
			.cancel-text{
				font-size: 3.2vw;
				font-weight: 300;
				color: #555;
				margin-top: 3.2vw;
			}
		}
	}
	.maskInfo-box{
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;
		padding: 4.27vw;
		.line{
			width: 1.07vw;
			height: 11.2vw;
			display: block;
			background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
			margin-right: 2.13vw;
			border-radius: 12.8vw;
		}
		.info-title{
			font-size: 4.27vw;
			font-weight: 500;
			color: #fff;
			width: 64.8vw;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.info-box{
			display: flex;
			flex-direction: column;
		}
		.info-border{
			margin-top: 1.07vw;
			border: 1px solid #A972FF;
			padding: 0.27vw 1.07vw;
			font-size: 2.67vw;
			font-weight: 300;
			color: #A972FF;
			border-radius: 1.07vw;
			margin-right: 1.07vw;
		}
		.get-btn{
			margin: 4.27vw 0;
			width: 100%;
			line-height: 12.8vw;
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			text-align: center;
			border-radius: 6.4vw;
			font-size: 3.73vw;
			font-weight: 500;
			color: #000000;
		}
	}
</style>